<template>
    <div class="nav">
      <Breadcrumb>
        <BreadcrumbItem to="/Control">管控</BreadcrumbItem>
        <BreadcrumbItem to="/ypml">药品管控</BreadcrumbItem>
        <BreadcrumbItem>药品录入</BreadcrumbItem>
      </Breadcrumb>
  
      <h2 class="primary">药品录入</h2>
    </div>
  
    <div class="info">
      <div class="left">
        <Collapse v-model="value" style="width: 220px">
          <Panel name="1">
            药品品种
            <template #content> 发散风热药 感冒药 </template>
          </Panel>
        </Collapse>
      </div>
  
      <div class="right">
        <Tabs :animated="false" style="padding-left: 15px">
          <TabPane label="药品">
            <div class="right1">
              <vxe-grid v-bind="gridOptions1" style="">
                <template #toolbar_buttons>
                  <div class="info1">
                    <vxe-input
                      v-model="searchName"
                      placeholder="请输入药品名称、编码"
                      style="width: 280px"
                    ></vxe-input>
                    <vxe-button status="primary">搜索</vxe-button>
                    <vxe-button style="border: 1px solid #945635;color:#945635">+ 新增药品</vxe-button>
                  </div>
                </template>
              </vxe-grid>
            </div>
          </TabPane>
          
          <TabPane label="规格"> 
            <vxe-grid v-bind="gridOptions2" style="">
              <template #toolbar_buttons>
                <div class="info1">
                  <vxe-input
                    v-model="searchName"
                    placeholder="请输入规格名称、编码"
                    style="width: 280px"
                  ></vxe-input>
                  <vxe-button status="primary">搜索</vxe-button>
                </div>
              </template>
            </vxe-grid>
          </TabPane>
        </Tabs>
      </div>
    </div>
  </template>
  
  <script setup>
  import {  reactive } from "vue";
  
  const findList = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        const list = [
          {
            id: 1,
            name: "中药库房",
            dizhi: "T1",
            mianji: "Develop",
            fuzeren: "Man",
            guanliren: 28,
            beizhu: "Shenzhen",
            caozuo: "1",
          },
        ];
        const rest = {
          page: {
            total: 200,
          },
          result: list,
        };
        resolve(rest);
      }, 500);
    });
  };
  
  const gridOptions1 = reactive({
    border: true,
    showOverflow: true,
    showFooter: true,
  
    columnConfig: {
      resizable: true,
    },
    pagerConfig: {
      enabled: true,
      pageSize: 20,
      perfect: true,
    },
    toolbarConfig: {
      custom: true,
      slots: {
        // 自定义插槽模板
        buttons: "toolbar_buttons",
      },
    },
    proxyConfig: {
      props: {
        result: "result",
        total: "page.total", // 配置响应结果总页数字段
      },
      ajax: {
        query: () => findList(),
      },
    },
    columns: [
      { field: "id", title: "序号" , width: 70 },
      { field: "name", title: "药品编码" , width: 70},
      { field: "dizhi", title: "药品名称" , width: 70},
      { field: "mianji", title: "剂量单位" , width: 70},
      { field: "fuzeren", title: "剂型" , width: 70},
      { field: "guanliren", title: "毒理" , width: 70},
      { field: "beizhu", title: "货源" },
      { field: "caozuo", title: "价值" , width: 70},
      { field: "caozuo", title: "梯次" , width: 70},
      { field: "caozuo", title: "原料药" , width: 70},
      { field: "caozuo", title: "急救药" , width: 70},
      { field: "caozuo", title: "操作", width: 70 },
    ],
  });
  
  const gridOptions2 = reactive({
    border: true,
    showOverflow: true,
    
  
    columnConfig: {
      resizable: true,
    },
    pagerConfig: {
      enabled: true,
      pageSize: 20,
      perfect: true,
    },
    toolbarConfig: {
      zoom: true,
      custom: true,
      slots: {
        // 自定义插槽模板
        buttons: "toolbar_buttons",
      },
    },
    proxyConfig: {
      props: {
        result: "result",
        total: "page.total", // 配置响应结果总页数字段
      },
      ajax: {
        query: () => findList(),
      },
    },
    columns: [
      { field: "id", title: "序号" , width: 140 },
      { field: "name", title: "规格编码" , width: 70},
      { field: "dizhi", title: "药品规格" , width: 70},
      { field: "mianji", title: "申领单位" , width: 70},
      { field: "fuzeren", title: "生产商" , width: 70},
      { field: "guanliren", title: "数字码", width: 70 },
      { field: "beizhu", title: "DDD值" , width: 70},
      { field: "beizhu", title: "审核状态" },
      { field: "caozuo", title: "操作" , width: 70},
    ],
  });
  </script>
  
  <style scoped>
  .nav {
    height: 80px;
    border-bottom: 1px solid #c4c2c2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    padding-left: 15px;
    background-color: #ffffff;
  }
  .info {
    border: 15px solid#f5f7f9;
    display: flex;
    background-color: #fff;
    height: 100vh;
    border-radius: 20px;
  }
  
  .primary {
    color: #945635;
  }
  h2 {
    font-weight: normal;
    font-size: 20px;
  }
  .left {
    float: left;
    background-color: #f5f7f9;
  }
  .right {
    width: 100%;
  }
  </style>
  